/*
 * 面向属性的 CSS
 */

 /* 版心盒子 */
 .wrapper{
     width: 360px;
     margin: 0 auto;
 }
/* 布局方式 */
.dpflex { display: flex; }
.dpnone { display: none; }
.flex1 { flex: 1 }
.fdcolumn{ flex-direction: column;}
.jccenter{justify-content: center;}
.jcevenly{ justify-content: space-evenly;}
.jcbetween{ justify-content: space-between;}

/* 盒模型 */
.mt0 { margin-top: 0; }
.mt8 { margin-top: 8px; }
.mt10{ margin-top: 10px; }
.mt16 { margin-top: 16px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt40 { margin-top: 40px; }

.mr16 { margin-right: 16px; } 
.mb16 { margin-bottom: 16px; }
.ml12 { margin-left: 12px; }
.ml16 { margin-left: 16px; } 
.ml20 { margin-left: 20px; } 

.ml8 { margin-left: 8px; }
.mb8 { margin-bottom: 8px; }
.mb20 { margin-bottom: 20px; }
.mb60 { margin-bottom: 60px; }

.mtb8{margin:8px,0px,8px,0px}
.ptb30{padding:30px,0px,30px,0px}

.pt20{padding-top: 20px;}

.pd8 { padding: 8px !important; }
.pdd30 { padding-bottom: 30px; }
.pl10{padding-left: 10px;}


.pd16 { padding: 16px; }
.pd30 { padding: 30px; }

/* 字号 */
.f12 { font-size: 12px; }
.f14 { font-size: 14px; }
.f16 { font-size: 16px; }
.f18 { font-size: 18px; }
.f20 { font-size: 20px; }
.f22 { font-size: 22px; }
.f24 { font-size: 24px; }
.f28 { font-size: 28px !important; }
.f34 { font-size: 34px; }
.f38 { font-size: 38px !important; }
.f40 { font-size: 40px; }
.f48 { font-size: 48px !important; }
.f50 { font-size: 50px !important; }
.f80 { font-size: 80px; }
.f100 { font-size: 100px; }


/* 行高 */
.link20{line-height: 20px;}
.link30{line-height: 30px;}
.link40{line-height: 40px;}
.link60{line-height: 60px;}




/* 加粗 */
.fb{font-weight: bold;}

/* 颜色 */
.c004{color: #004E73;}
.cf{color: #fff;}
.c005{color: #005177;}
.c203{color: #c2c0c3;}
.cred{color: red;}
.ce8{color: #E8E8E8;}
.c10{color: #101010;}
.c8a{color: #8A8A8A;}
.c42{color: #4294FF;}
.c9a{color: #9A9A9A;}
.c333{color: #333333;}


/* 不平铺 */
.bgr{background-repeat: no-repeat;}

/* 测试边框 */
.bor{border: 1px solid;}

/* 定位 */
.pr{position: relative;}
.pa{position: absolute;}
.pf{position: fixed;}

/* 弧度 */
.brad{border-radius: 15px;}

/* 居中 */
.tac{text-align: center;}

/* 首行缩进 */
.ti20{text-indent: 20px;}
.ti10{text-indent: 10px;}